<template>
  <div :class="orderList.length > 0?'':'full-height'">
		<van-nav-bar title="订单列表" />
		<!-- 搜索栏 -->
		<div class="order_search pd-24 bg-white">
      <div class="bg-white flex-v-c pos-r">
				<van-field
					v-model="searchKey"
					class="flex-1"
					clearable
					placeholder="搜索技师名或服务名"
					left-icon="search"
					@click-left-icon="search"
					@keyup.enter="search"
				/>
				<div class="pos-a right-40 fs-26" @click="search">搜索</div>
			</div>
			<div class="sift" @click="openPop">
				<span>筛选</span>
				<img src="@/assets/images/physio/sift.png" />
			</div>
    </div>
		<van-tabs v-model:active="active" @change="tabChange" >
			<van-tab :title="item.title" v-for="(item,index) in tabs" :key="index">
				<van-list v-if="orderList && orderList.length > 0" v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
                        @load="moreData">
					<div class="pb-50">
							<physioOrder :info="orderList" :switch30="switch30" @reset="reset" :isArtificer="isArtificer" @refund="refund"></physioOrder>
					</div>
				</van-list>
				<div v-else class="noorder"><img src="@/assets/images/physio/order1.png" /><span>暂无订单记录</span></div>
			</van-tab>
		</van-tabs>
		<!-- 右侧筛选弹窗 -->
    <van-popup v-model="rightPopupShow" position="right" class="right-popup">
      <div class="pop-content">
        <van-nav-bar fixed title="筛选" left-arrow @click-left="rightPopupShow=false" />
        <div class="has-top">
          <p class="gray-line" />
          <p class="fs-28 pl-24 mt-40 fw-b">下单时间</p>
					<div class="time_frame pd-24">
						<p v-for="(item,index) in dataList" :key="index" class="filter-item" :class="activeOrderDateInd===index?'activeDate':''" @click="changeOrderDate(index)">{{ item }}</p>
					</div>
          <div class="flex-v-c hb mb-28 pd-24">
            <span class="flex-1 popup-input ptb-16" :class="requestData.orderStartTime?'':'color-gray-light'" @click="openOrderStartDateSelect"> {{ requestData.orderStartTime||'请选择开始时间' }}</span>
            <span class="fs-28 ptb-16 mlr-18">至</span>
            <span class="flex-1 popup-input ptb-16 " :class="requestData.orderEndTime?'':'color-gray-light'" @click="openOrderEndDateSelect"> {{ requestData.orderEndTime||'请选择结束时间' }}</span>
          </div>
        </div>
				<div>
          <p class="gray-line" />
          <p class="fs-28 pl-24 mt-40 fw-b">服务时间</p>
					<div class="time_frame pd-24">
						<p v-for="(item,index) in dataList" :key="index" class="filter-item" :class="activeServerDateInd===index?'activeDates':''" @click="changeServiceDate(index)">{{ item }}</p>
					</div>
          <div class="flex-v-c hb mb-28 pd-24">
            <span class="flex-1 popup-input ptb-16" :class="requestData.serviceStartTime?'':'color-gray-light'" @click="openServiceStartDateSelect"> {{ requestData.serviceStartTime||'请选择开始时间' }}</span>
            <span class="fs-28 ptb-16 mlr-18">至</span>
            <span class="flex-1 popup-input ptb-16 " :class="requestData.serviceEndTime?'':'color-gray-light'" @click="openServiceEndDateSelect"> {{ requestData.serviceEndTime||'请选择结束时间' }}</span>
          </div>
        </div>
				<div>
          <p class="gray-line" />
          <p class="fs-28 pl-24 mt-40 fw-b">订单类型</p>
					<van-radio-group v-model="radio" class="flex pd-24" @change="change">
						<van-radio name="-1" class="mr-24 fs-28" checked-color="#24c373" >全部</van-radio>
						<van-radio name="1" class="mr-24 fs-28" checked-color="#24c373" >加钟</van-radio>
						<van-radio name="0" class="fs-28" checked-color="#24c373" >不加钟</van-radio>
					</van-radio-group>
				</div>
        <div class="bottom-box flex">
          <div class="flex-1 tac fs-28 ptb-28" @click="resetFilte">重置</div>
          <div class="flex-1 color-white bg-physio-primary1 tac fs-28 ptb-28" @click="confirm">确认</div>
        </div>
      </div>
    </van-popup>

    <!-- 时间选择 -->
    <van-popup v-model="startDateSelect" position="bottom">
      <van-datetime-picker
        v-model="startCurrentDate"
        item-height="45"
        visible-item-count="4"
        type="date"
        title="请选择开始时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onStartConfirm"
      />
    </van-popup>
    <van-popup v-model="endDateSelect" position="bottom">
      <van-datetime-picker
        v-model="endCurrentDate"
        item-height="45"
        visible-item-count="4"
        type="date"
        title="请选择结束时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onEndConfirm"
      />
    </van-popup>
		<!-- 退款原因 -->
		<van-dialog v-model="refundApply" title="请输入退款原因" show-cancel-button @confirm="OrderRefundApply" @cancel="cancelRefundApply">
      <van-field v-model="param.reason" type="textarea" class="fs-32 mt-15" placeholder="请输入退款原因~" rows="7" maxlength="50" />
    </van-dialog>
		
		<tabBar />
  </div>
</template>

<script>
import tabBar from 'components/physio/tabBar.vue'
import TopSearch from 'components/Search'
import physioOrder from 'components/physioOrder/index.vue'
import { GetBookHomeOrderPage } from 'api/physio'
import { GetBusinessFunction } from 'api/businessSetting'
import { OrderRefundApply } from 'api/teaHouse'

export default {
  components: {
    physioOrder,TopSearch,tabBar
  },
  props: {},
  data() {
    return {
			tabs:[
				{
					title:'全部订单',
					status:-1,
				},
				{
					title:'待付款',
					status:0,
				},				
				{
					title:'待服务',
					status:1,
				},
				{
					title:'进行中',
					status:2,
				},
				{
					title:'待评价',
					status:4,
				},
				{
					title:'已完成',
					status:5,
				},
				{
					title:'已取消',
					status:6,
				},
			],
			active:0,
			states:-1, // -1 全部

			//右侧弹窗
			rightPopupShow: false,

			// 时间相关
			minDate: new Date(1920, 0, 1),
      maxDate: new Date(2120, 11, 1),
      startDateSelect: false,
      endDateSelect: false,
      orderStartCurrentDate: new Date(),
      orderEndCurrentDate: new Date(),
      serviceStartCurrentDate: new Date(),
			serviceEndCurrentDate: new Date(),
			startCurrentDate: new Date(),
			endCurrentDate: new Date(),
      oldRequestData: {},

      dataList: ['本周', '本月','上周', '上月', '3个月内'],
      activeOrderDateInd: -1,
			activeServerDateInd: -1,
			startTime: '',
      endTime: '',
      OrderStartTime: '',
      OrderEndTime: '',
			ServiceStartTime: '',
      ServiceEndTime: '',
			// 请求参数
      requestData: {
				PageIndex:1
			},
			searchKey: '',
			// 订单列表
      orderList: [],
			loading: false, // 加载load
      finished: false, // 无更多数据
			refundApply: false,
			param: {}, //申请退款传参
			switch30: '', //申请退款是否显示(0不显示 1显示)
			timeField: 0, //0下单时间 1服务时间+
			radio:'-1', //是否加钟 -1全部 0不加钟 1加钟
			isArtificer: 0, //是否技师端 0用户端 1技师端
      scollRequest: true,
    }
  },
  computed: {

  },
  watch: {

  },
  created() {
		if(this.$route.query.states){
			this.active = parseInt(this.$route.query.states)
			this.states = this.$route.query.states
			if(this.active <= 2){
				this.active++
			}
			this.requestData.states = this.$route.query.states
		}
		this.GetBusinessFunction()
		//this.GetBookHomeOrderPage()
  },
  mounted() {
  },
	activated() {
		this.reset()
  },
  methods: {
		// 关键字搜索商品
    search() {
      this.resetParams()
      this.requestData.searchKey = this.searchKey
      this.GetBookHomeOrderPage()
    },
		changeOrderDate(index) {
			this.timeField = 0
      this.activeOrderDateInd = index
      switch (index) {
        case 0:
          this.requestData.orderStartTime = this.$utils.thisWeek().startDate
          this.requestData.orderEndTime = this.$utils.thisWeek().endDate
          break
        case 1:
					this.requestData.orderStartTime = this.$utils.thisMonth().startDate
          this.requestData.orderEndTime = this.$utils.thisMonth().endDate
          break
        case 2:
					this.requestData.orderStartTime = this.$utils.lastWeek().startDate
          this.requestData.orderEndTime = this.$utils.lastWeek().endDate
          break
        case 3:
					this.requestData.orderStartTime = this.$utils.lastMonthE().startDate
          this.requestData.orderEndTime = this.$utils.lastMonthE().endDate
          break
				case 4:
					this.requestData.orderStartTime = this.$utils.last3month().startDate
          this.requestData.orderEndTime = this.$utils.last3month().endDate
          break
      }
    },
		changeServiceDate(index) {
			this.timeField = 1
      this.activeServerDateInd = index
      switch (index) {
        case 0:
          this.requestData.serviceStartTime = this.$utils.thisWeek().startDate
          this.requestData.serviceEndTime = this.$utils.thisWeek().endDate
          break
        case 1:
					this.requestData.serviceStartTime = this.$utils.thisMonth().startDate
          this.requestData.serviceEndTime = this.$utils.thisMonth().endDate
          break
        case 2:
					this.requestData.serviceStartTime = this.$utils.lastWeek().startDate
          this.requestData.serviceEndTime = this.$utils.lastWeek().endDate
          break
        case 3:
					this.requestData.serviceStartTime = this.$utils.lastMonthE().startDate
          this.requestData.serviceEndTime = this.$utils.lastMonthE().endDate
          break
				case 4:
					this.requestData.serviceStartTime = this.$utils.last3month().startDate
          this.requestData.serviceEndTime = this.$utils.last3month().endDate
          break
      }
    },
		tabChange(e){
			console.log('e',e)
			this.states = e
			this.orderList = []
			if(e < 2){
				e--
			}else if(e == 2)
			{
				e = '1,2,8'
			}
			this.requestData.states = e
			this.requestData.PageIndex = 1
			this.GetBookHomeOrderPage()
		},
		//获取开关权限
		GetBusinessFunction(){
      GetBusinessFunction(30).then(res => {
        if (res) {
          this.switch30 = res.Data[0].Value;
        }
      })
    },

		change(e){
			this.radio = e
		},
		
		GetBookHomeOrderPage() {
      const _this = this
			_this.loading = true
      GetBookHomeOrderPage(this.requestData).then(res => {				
				if (_this.requestData.PageIndex >= res.Data.TotalAmout) {
            _this.finished = true
        } else {
          _this.finished = false
        }
				_this.loading = false
        if (res && res.Data && res.Data.Data.length > 0) {
          res.Data.Data.forEach(item => {
            item.show = false
            _this.orderList.push(item)
          })
        }
        _this.totalAmout = res.Data.TotalAmout
        _this.scollRequest = true
        if (_this.scollTop > 0) {
          document.body.scrollTo(0, _this.scollTop)
        }
      })
    },
		// 重新请求
		reset() {
			console.log("刷新页面")
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 10
      this.orderList = []
      // 获取列表
      this.GetBookHomeOrderPage()
    },
		// 上拉加载更多
		moreData() {
      this.requestData.PageIndex = this.requestData.PageIndex + 1
      this.GetBookHomeOrderPage()
    },
	
		refund(item){
			this.refundApply = true
			this.param.OrderId = item.OrderId
		},
		// 确认申请退款
		OrderRefundApply() {
      if (this.param.reason == '') {
          this.$toast('请输入退款原因')
          return
      }
      OrderRefundApply({
        orderId: this.param.OrderId,
        reason: this.param.reason,
        image: ''
      }).then(res => {
        if (res.Data) {
          // 获取列表
          this.reset()
      	}
      })
    },
		// 取消申请退款
		cancelRefundApply() {
      this.param.reason = ''
      this.refundApply = false
    },
		
		
  
    openUserCard() {
      const url = this.$LocalDomain + '/m/home/union?pm=123&storeId=' + this.orderInfo.StoreId
      if (document.referrer.indexOf('https://payapp.weixin.qq.com/') !== -1) {
        parent.postMessage(JSON.stringify({
          action: 'jumpOut',
          jumpOutUrl: url
        }), 'https://payapp.weixin.qq.com')
      } else {
        window.location.href = url
      }
    },
		
		openPop() {
      //this.requestData = JSON.parse(JSON.stringify(this.oldRequestData))
      //this.$forceUpdate()
      this.rightPopupShow = true
    },
		openOrderStartDateSelect() {
			this.timeField = 0
      if (this.requestData.orderStartTime) {
        this.orderStartCurrentDate = new Date(this.requestData.orderStartTime)
      } else {
        this.orderStartCurrentDate = new Date()
      }
      this.startDateSelect = true
    },
    openOrderEndDateSelect() {
			this.timeField = 0
      if (this.requestData.endTime) {
        this.orderEndCurrentDate = new Date(this.requestData.orderEndTime)
      } else {
        this.orderEndCurrentDate = new Date()
      }
      this.endDateSelect = true
    },
		openServiceStartDateSelect() {
			this.timeField = 1
      if (this.requestData.serviceStartTime) {
        this.serviceStartCurrentDate = new Date(this.requestData.serviceStartTime)
      } else {
        this.serviceStartCurrentDate = new Date()
      }
      this.startDateSelect = true
    },
    openServiceEndDateSelect() {
			this.timeField = 1
      if (this.requestData.serviceEndTime) {
        this.serviceEndCurrentDate = new Date(this.requestData.serviceEndTime)
      } else {
        this.serviceEndCurrentDate = new Date()
      }
      this.endDateSelect = true
    },
    onStartConfirm(val) {
			if(this.timeField == 0){
				if (this.requestData.orderEndTime && this.endCurrentDate < val) {
					this.$toast('开始时间不能晚于结束时间')
					return false
				}							
				this.requestData.orderStartTime = this.$utils.dateFomat('yyyy-mm-dd', val)			
			}else{	
				if (this.requestData.serviceEndTime && this.endCurrentDate < val) {
					this.$toast('开始时间不能晚于结束时间')
					return false
				}		
				this.requestData.serviceStartTime = this.$utils.dateFomat('yyyy-mm-dd', val)
			}
      this.requestData.startTime = this.$utils.dateFomat('yyyy-mm-dd', val)
      this.startDateSelect = false
      this.$forceUpdate()
    },
    onEndConfirm(val) {   
			if(this.timeField == 0){		
				if (this.requestData.orderStartTime && this.startCurrentDate > val) {
					this.$toast('结束时间不能早于开始时间')
					return false
				}		
				this.requestData.orderEndTime = this.$utils.dateFomat('yyyy-mm-dd', val)
				
			}else{				
				if (this.requestData.serviceStartTime && this.startCurrentDate > val) {
					this.$toast('结束时间不能早于开始时间')
					return false
      	}
				this.requestData.serviceEndTime = this.$utils.dateFomat('yyyy-mm-dd', val)
			}
      this.requestData.endTime = this.$utils.dateFomat('yyyy-mm-dd', val)
      this.endDateSelect = false
      this.$forceUpdate()
    },
    resetFilte() {
			this.radio = '-1'
			this.activeOrderDateInd = -1
			this.activeServerDateInd = -1
      this.requestData.endTime = ''
      this.requestData.startTime = ''
			this.requestData.orderEndTime = ''
      this.requestData.orderStartTime = ''
			this.requestData.serviceEndTime = ''
      this.requestData.serviceStartTime = ''
      this.orderStartCurrentDate = new Date()
      this.orderEndCurrentDate = new Date()
      this.serviceStartCurrentDate = new Date()
      this.serviceEndCurrentDate = new Date()
			this.startCurrentDate = new Date()
      this.endCurrentDate = new Date()
    },
    confirm() {
      if (new Date(this.requestData.endTime) < new Date(this.requestData.startTime)) {
        this.$toast('结束时间不能早于开始时间')
        return false
      }
      this.rightPopupShow = false
			
			this.requestData.startTime = this.requestData.orderStartTime
			this.requestData.endTime = this.requestData.orderEndTime
      this.oldRequestData = JSON.parse(JSON.stringify(this.requestData))
      this.oldRequestData.userName = this.val
      this.freshData++
			this.requestData.timeField = this.timeField
			this.requestData.isAddedOrder = this.radio
			this.orderList = []
			this.GetBookHomeOrderPage()
    },

		resetParams() {
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 4
      this.orderList = []
      this.totalAmout = 0
      this.scollRequest = true
      this.scollTop = 0
      this.end = false
    },
  }
}
</script>

<style lang="scss" scoped>
	.noorder{
		margin: 118px 136px 0 134px;
		position: relative;
		span{
			position: absolute;
			top: 252px;
			left: 168px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
		}
	}
	.order_search{
		display: flex;
		align-items: center;
	}
	.sift{
		width: 136px;
		height: 64px;
		background: #F2F3FC;
		border-radius: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.sift img{
		width: 32px;
		height: 32px;
		margin-left: 10px;
	}
	.pos-r{
		width: 542px;
		height: 64px;
		background: #FFFFFF;
		border-radius: 41px;
		border: 1px solid #24c373;
		margin-right: 24px;
		padding: 0 10px;
	}
	.van-cell{
		padding:0 45px 0 12px;
	}
	.van-cell::after{
		border-bottom:none
	}
	
	.right-popup{
		width: 86vw;
		height: 100vh;
		.pop-content{
			position: relative;
			height: 100%;
			width: 100%;
			overflow: scroll;
			padding-bottom: 100px;
			.gray-line{
				height: 12px;
				background: #F6F6F6;
			}
			.popup-input{
				text-align: center;
				font-size: 28px;				
				background: #F2F3FC;
				border-radius: 16px;
			}
			.bottom-box{
				position: fixed;
				bottom: 0;
				width: 100%;
				background: #fff;
			}
		}
	}
	.time_frame{
		display: flex;
		flex-wrap: wrap;
		font-size: 28px;
		p{
			width: 182px;
			height: 64px;
			line-height: 64px;
			background: #F2F3FC;
			border-radius: 40px;
			text-align: center;
			margin-bottom: 24px;
		}
		p:nth-child(3n+2){
			margin: 0 24px;
		}
	}
	.ht:before, .hb:before{
		border-top: none;
	}
	.full-height{
		height: 100vh;
		background: #fff;
	}
	.activeDate {
		background: rgba(116,89,255,0.1);
		border-radius: 40px;
		border: 1px solid #24c373;
		font-weight: bold;
		color: #24c373;
	}
	.activeDates {
		background: rgba(116,89,255,0.1);
		border-radius: 40px;
		border: 1px solid #24c373;
		font-weight: bold;
		color: #24c373
	}
	/deep/.van-tab--active{
		color:#24c373;
	}
	/deep/.van-tabs__line {
		background:#24c373;
	}
	/deep/ .van-dialog__confirm{
		color:#24c373;
	}
</style>
